<script setup>
import { computed } from 'vue'

const props = defineProps({
  fileUrl: {
    type: String,
    required: true,
  },
  fileSuffix: {
    type: String,
    required: true,
  },
})

const loading = ref(false)

const isOfficeFile = computed(() => {
  return ['.docx', '.xlsx'].includes(props.fileSuffix)
})

const isImageFile = computed(() => {
  return ['.jpg', '.png', '.jpeg', '.gif'].includes(props.fileSuffix)
})

const officeViewerUrl = computed(() => {
  return `https://view.officeapps.live.com/op/view.aspx?src=${props.fileUrl}`
})

onMounted(() => {
  nextTick(() => {
    if (isOfficeFile.value) {
      loading.value = true
      document.getElementById('fileIframe').onload = () => {
        loading.value = false
      }
    }
  })
})
</script>

<template>
  <div>
    <div v-if="isOfficeFile" v-loading="loading" element-loading-text="文档加载中..." class="wh-full">
      <iframe
        id="fileIframe"
        :src="officeViewerUrl"
        width="100%"
        height="100%"
        frameborder="0"
      />
    </div>
    <embed
      v-else-if="fileSuffix === '.pdf'"
      :src="fileUrl"
      width="100%"
      height="100%"
      class="w-full h-full"
    >
    <el-image
      v-else-if="isImageFile"
      :src="fileUrl"
      fit="contain"
      class="w-full h-full"
    />
  </div>
</template>
